<template>
   <div style="padding-top:100px;">
     <div class="app-title-container title-position">
       <modules-title titleName="项目设置/基础数据">
        <template slot="btn">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRow" :disabled="disabled">新增
          </el-button>
        </template>
      </modules-title>
    </div>
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container" style="padding-top:30px;">
          <el-tree :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          node-key="value"
          :current-node-key="currentNodeKey"
          ref="tree"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick" />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <div style="padding:20px" class="baseSet">
          <item-title :title="label" :borderShow="false"/>
         <el-table
         :data="data"
         size="medium"
         border
         >
          <el-table-column prop="dict_val" :label="label" align="center">
            <template slot-scope="scope" >
                <div v-if="!isEdit&&scope.$index != current">
                  <span>{{scope.row.dict_val}}</span>
                  <!-- <el-button style="margin-left:10px" type="text" icon="el-icon-edit" size="medium" v-hasPermi="{v:['data:edit']}" :disabled="disabled" @click="editItem(scope.row,scope.$index)"></el-button> -->
                </div>
                <div v-else-if="isEdit&&scope.$index != current">
                   <span>{{scope.row.dict_val}}</span>
                   <!-- <el-button style="margin-left:10px" type="text" icon="el-icon-edit" size="medium" v-hasPermi="{v:['data:edit']}" :disabled="disabled" @click="editItem(scope.row,scope.$index)"></el-button> -->
                </div>
                <!-- <div v-else style="display:flex">
                  <el-input v-model="scope.row.dict_val" v-focus  @blur="submit(scope.row.id,scope.$index)"></el-input>
                  <el-button type="text" icon="el-icon-check" size="medium" @click="save(scope.row.id,scope.$index)"></el-button>
                </div> -->
                <div v-else style="display:flex">
                  <el-form style="width:100%;height:32px" @submit.native.prevent>
                    <el-form-item prop="dict_val"
                    :rules="{
                    required: true,
                    trigger: 'blur'
                  }">
                     <div style="display:flex">
                      <el-input v-model="scope.row.dict_val" v-focus @blur="submit(scope.row.id,scope.$index)" ></el-input>
                      <!-- <el-button type="text" icon="el-icon-check" size="medium" @click="save(scope.row.id,scope.$index)"></el-button> -->
                     </div>
                    </el-form-item>
                  </el-form>
                </div>
            </template>
          </el-table-column>
          <el-table-column label="操作"
            align="left"
            header-align="center"
            width="300"
            >
            <template slot-scope="scope">
              <el-button type="text"  size="meduim"  v-if="scope.row.if_edit==false" @click="editItem(scope.row,scope.$index)">编辑</el-button>
              <el-button class="text-btn-red" type="text" size="meduim" v-if="scope.row.if_deleted==false" @click="deleteItem(scope.row,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination style="display:flex;justify-content:flex-end;" :total="total"
          :page.sync="pages.pageNum" :limit.sync="pages.pageSize" @pagination="afreshList" /> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {baseTypeList,getDictionary,createDiction,removeDicction,deleteDicction} from '@/api/lookInfoModel'
export default {
  components: {
    CreateDialog: ()=>import("../modules/createDialog")
  },
  data() {
    return {
      defaultValue:'',
      currentNodeKey: "demand_source",
      auto:false,
      disabled:false,
      isAdd:false,
      menu_status:'',
      department:'',
      defaultProps: {
        children: "children",
        label: "label"
      },
      deptOptions:[
        // {
        //   // label: '基础数据',
        //   // children: [

        //   // ]
        // }
      ],
      label:'需求来源',
      resource:'',
      current:null,
      data:[{
          id:1,
          resource:'cdd'
        },
        {
          id:2,
          resource:'cdd'
        },
        {
          id:3,
          resource:'cdd'
        }
        ],
      total: 0,
      listData: [

      ],
      // 查询参数
      pages: {
        pageNum: 1,
        pageSize: 200
      },
      queryParams: {
        pager: {
          limit: 20,
          skip: 0,
          order_by: "",
          OrderMethod: -1,
        },
      },
      currentId: "",
      detailsData: null,
      dict_type:'',
      isEdit:false,
      isNull:false,
      i:null,
    };
  },
  directives:{
    focus: {
      inserted: function(el) {
        el.children[0].focus();
      },
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    // this.getLookInfoModelList()
    this.getBaseTypeList()
    this.$nextTick(function(){
      // this.currentNodeKey = 'demand_source'
      this.$refs.tree.setCurrentKey('demand_source');
    })
    // this.getDictionaryList()
  },
  methods: {
    afreshList(){
      // this.getBaseTypeList()
    },
    //获取基础类型列表
    getBaseTypeList(){
      baseTypeList().then(res=>{
        console.log(res.data)
        if(res.code==200){
          if(res.data!=null){
            for(let i=0;i<res.data.length;i++){
              // this.deptOptions[0].children.push({
              //   "value":res.data[i].value,
              //   "label":res.data[i].name
              // })
              this.deptOptions.push({
                "value":res.data[i].value,
                "label":res.data[i].name
              })
              this.dict_type = this.deptOptions[0].value
            }
            console.log(this.deptOptions)
            this.getDictionaryList()
          }
        }
      })
    },
    //获取列表
    getDictionaryList(){
      let data = {
        condition: {
          status: 0,
          dict_type: this.dict_type,
          dict_key: ''
        },
        pager: {
          limit: this.pages.pageSize,
          skip: this.pages.pageNum
        }
      };
      getDictionary(data).then(res=>{
        if(res.code==200){
          console.log(res.data)
          this.data = res.data.data
          this.total = res.data.total
        }
      })
    },
    addRow(){
      this.i = this.data.length
      this.disabled = true
      // this.isEdit = true
      this.current = this.data.length
      this.resource = ''
      this.data.push(
        {
          id:'',
          dict_val:'',
        }
      )
      console.log(this.data)
    },
    submit(id,index){
      this.save(id,index)
    },
    save(id,index){
      if(this.data[index].dict_val==''||this.data[index].dict_val.split(" ").join("").length == 0){
        // this.$message.error('请填写相关数据')
        return
      }else{
        let dataU = {
        id:id,
        dict_key: this.dict_type + "_" + this.data[index].dict_val,
        dict_val: this.data[index].dict_val,
        status: 1,
        dict_type: this.dict_type,
        remark:this.label
      }
      let dataC = {
        dict_key: this.dict_type + "_" + this.data[index].dict_val,
        dict_val: this.data[index].dict_val,
        status: 1,
        dict_type: this.dict_type,
        remark:this.label
      }
      if(id){
        removeDicction(dataU).then(res=>{
        if(res.code==200){
          this.$message.success('修改完成')
          this.getDictionaryList()
          this.current = null
            this.$store.dispatch("sys/getSysAllDic")
        }else{
            this.$message.error(res.msg)
            this.disabled = true
         }
      })
      }else{
        createDiction(dataC).then(res=>{
        if(res.code==200){
          this.$message.success('创建完成')
          this.getDictionaryList()
          this.current = null
            this.$store.dispatch("sys/getSysAllDic")
        }else{
            this.$message.error(res.msg)
            this.disabled = true
         }
      })
      }
      this.disabled = false
      }
    },
    handleNodeClick(data){
      // this.currentNodeKey = data.value
      console.log(data)
      if(data.label!='基础数据'){
        this.dict_type = data.value
        this.label = data.label
        console.log(this.dict_type)
        this.disabled = false
        this.current = null
        this.getDictionaryList()
      }
    },
    deleteItem(row,index){
      this.disabled = false
      // console.log(index)
      if(row.id==''){
        this.data.splice(index,1)
      }else{
        this.$confirm("是否确认删除 " + row.dict_val + " ?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
            deleteDicction([row.id]).then(res => {
              if(res.code==200){
                this.$message.success('删除成功')
                this.getDictionaryList()
                  this.$store.dispatch("sys/getSysAllDic")
              }else{
                this.$message.error(res.msg)
              }
            });
        })
        .catch(function() {});
      }
    },
    editItem(row,index){
      this.i = index
      this.current = index
      this.currentId = row.id;
      console.log(this.currentId)
      this.data[index].dict_val = row.dict_val
      this.isEdit = true
      this.disabled = true
    }
  },
};
</script>
<style lang="scss">
.head-container{
  height: calc(100vh - 130px);
  border-right:1px solid #e3e3e3;
  .el-tree-node:focus>.el-tree-node__content{
      background-color: #eef3fd;   //背景色
      color: #286ee6;
    }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      background-color: #eef3fd;
      color: #286ee6;
  }
  .el-tree-node__content {
    height: 32px!important;
        &:hover {
          background: #eef3fd;
          color: #286ee6;
        }
      }
  }
.lookInfo-container .el-form-item--small .el-form-item__error {
    display: none;
}
// .el-tree-node:focus>.el-tree-node__content{
//       background-color: #eef3fd;   //背景色
//       color: #286ee6;
//     }
// .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
//     background-color: #eef3fd;
//     color: #286ee6;
// }
// .el-tree-node__content {
//   height: 32px!important;
//       &:hover {
//         background: #eef3fd;
//         color: #286ee6;
//       }
//     }
    .baseSet{
      .el-table{
      max-height: calc( 100vh - 130px);
      // .el-table__header{
      //   .cell{
      //   }
      // }
      // .el-table__body{
      //   .el-table__row{
      //     height: 60px;
      //     .cell{
      //     }
      //   }
      // }
      .el-table__body-wrapper{
        overflow-y: auto;
        max-height: calc( 100vh - 200px);
      }
    }
    }
//  .lookInfo-container .el-input--small .el-input__inner{
//   border: 1px solid red!important;
// }
</style>
